@import "../style/common.less";
html,body,.mainContainer{
  width: 100%;
  height: 100%;
}
.header{
  width: 100%;
  height: 50px;
  // background-color: @index-background-color;
  // box-shadow: 2px 2px 10px #cccccc;
  position: absolute;
  top: 0px;
  z-index: 1;
}
.button{
  float: right;
  // background-color: @index-background-color;
  // border-left: 1px solid grey;
  width: 70px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-items: center;
  // border-left: 1px solid @index-border;
  transition: 0.2s linear;
  margin-top: 20px;
  color: white;
  font-size: 1.5em;
  position: relative;
  z-index: 10;
}
.div_login_button{
  .button();
}
.div_login_button > span{
  text-align: center;
  cursor: default;
  margin-left: 25%;
}
.div_login_button:hover{
  // background-color: grey;
}
.div_register_button{
  .button();
  // border-right: 1px solid @index-border;
  margin-right: 50px;
}
.div_register_button:hover {
  // background-color: grey;
}
.div_register_button > span{
  text-align: center;
  cursor: default;
  margin-left: 25%;
}
.img_user_head {
  width: 45px;
  height: 45px;
  margin-top: 3px;
  margin-right: 30px;
  float: right;
  border-radius: 50%;
}
.background-img{
  width: 100%;
  height: 85%;
  position: absolute;
  top: 0px;
  z-index: 0;
  transition: all 500ms linear 0s;
}
.background-img:hover{
  transform: matrix(1.05,0,0,1.05,0,0);
}
.title{
  font-size: 5em;
  color: white;
  position: absolute;
  left: 50%;
}
.titleContainer{
  width: 100%;
  height: 80%;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
}

